<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script language="javascript">
		//联动函数
		function redirect(x) {
			var temp = document.getElementById("to");
			temp.options.length = 0;
			var i = parseInt(x) + 1;
			for (; i <= 24; i++) { 
				temp.options.add(new Option(i, ""));
			}
			//temp.options[0].selected=true;
		}

		function getDaysOfMonth(month) {
			var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			return days[parseInt(month) - 1];
		}

		function createDaySelect(month) {
			var obj = document.getElementById("day");
			var days = getDaysOfMonth(month);
			var length = obj.options.length;
			if (length == 1) {
				obj.options.length = 0;
				for (var i = 1; i <= days; i++) {
					obj.options.add(new Option(i, ""));
				};
			} else if (days > length) {
				for (var i = length + 1; i <= days; i++) {
					obj.options.add(new Option(i, ""));
				};
			} else {
				for (var i = length - 1; i > days - 1; i--) {
					obj.options.remove(i);
				}
			}
		}
	</script>
</head>
<body>
	<div>
		<dl>
			<dt>小时联动</dt>
			<dd>
				<select name="from" id="from" onChange="redirect(this.value)">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
				</select>
				<label>-</label>
				<select name="to" id="to">
					<option value="请选择" selected>请选择</option>
				</select>
			</dd>
		</dl>
	</div>

	<div>
		<dl>
			<dt>日期联动</dt>
			<dd>
				<select id="month" onChange="createDaySelect(this.value)">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>
				<label>月</label>
				<select id="day">
					<option value="请选择" selected>请选择</option>
				</select>
				<label>日</label>
			</dd>
		</dl>
	</div>
</body>
</html>